<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="top_wrap">
	<div id="top">
		<div id="top_content">
			<a href="#"><i></i>首页</a>
			<a href="#"><i></i>商城</a>
			<a href="#">我的订单</a>
			<a href="#">关于我们</a>
		</div>
	</div>
</div>
<!--关于我们-->
<div id="about_us">
	<div id="about_us_list">
			<ul>
				<li><h2>新手帮助</h2></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">联系客服</a></li>
				<li><a href="#">意见反馈</a></li>
			</ul>
			<ul>
				<li><h2>新手帮助</h2></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">联系客服</a></li>
				<li><a href="#">意见反馈</a></li>
			</ul>
			<ul>
				<li><h2>新手帮助</h2></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">联系客服</a></li>
				<li><a href="#">意见反馈</a></li>
			</ul>
			<ul>
				<li><h2>新手帮助</h2></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">联系客服</a></li>
				<li><a href="#">意见反馈</a></li>
			</ul>
			<ul>
				<li><h2>新手帮助</h2></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">联系客服</a></li>
				<li><a href="#">意见反馈</a></li>
				<li><a href="#">规则众议院</a></li>
			</ul>
			<ul>
				<li><h2>新手帮助</h2></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">联系客服</a></li>
				<li><a href="#">意见反馈</a></li>
			</ul>
	</div>
	<div class="line">
			<span>©2019 Mogujie.com 杭州卷瓜网络有限公司</span>
	</div>
	<p>
		<span>营业执照：</span>
		<span>913301065526808764</span>
		<span>网络文化经营许可证：</span>
		<span>浙网文（2016）0349-219号</span>
		<span>增值电信业务经营许可证：</span>
		<span>浙B2-20110349</span>
		<span>安全责任书</span>
		<span>浙公网安备 33010602002329号</span>
	</p>
	<p>
		<span>互联网药品信息服务资格证书编号：（浙)-经营性-2018-0002</span>
		<span>浙网食A33010003</span>
		<span>出版物网络交易平台服务经营备案证</span>
		<span>（浙）网械平台备字[2018]第00006号</span>
	</p>
</div>

<header>
	<div>
		<a id="logo">
			<img src="../img/logo.png" alt="">
		</a>
		<a href="#" id="cate_btn"><i></i>目录</a>
	</div>
	
	<div>
		<input type="text" placeholder="阔腿裤">
		<input type="button">
	</div>
	<div>
		<a href="#"><img src="../img/message.png">消息</a>
		<a href="#"><img src="../img/save.png">收藏</a>
		<a href="http://localhost/mogujie/html/carList.html" target="_blank" id="red_dot"><img src="../img/car.png"><span></span>购物车</a>
		<a href="#" id="download"><img src="../img/code.png">下载APP</a>
		<section id="app_code">
			<img src="../img/app_code.png">
		</section>
	</div>
	<div>
		<a href="http://localhost/mogujie/html/login.html" target="_blank"><img src="../img/mogu_min.png">登陆</a>
	</div>
</header>
<!-- <div id="goodsDetail">
	<section>
		<img src="">
	</section>
	<section>
		<h2>商品标题商品标题商品标题商品标题</h2>
		<div>
			<p>价格：<span><del>￥90</del></span></p>
			<p>促销价：<b>￥45</b></p>
			<p>店铺优惠：<a><span>满69元立减2元</span><i>领取</i></a><a><span>满99元立减3元</span><i>领取</i></a></p>
		</div>
		<div>
			<p>客服：<span><img src="../img/contact.gif"></span></p>
			<p>数量：<b><a href="javascript:;">-</a><input type="text" value="1"><a href="javascript:;">+</a></b</p>
			<p><a href="javascript:;">立即购买</a><a href="javascript:;">加入购物车</a></p>
		</div>
		
		
	
	</section>
</div> -->

<script src="../js/promise.js"></script>
<script>
	// console.log(location.search);

var num=location.search.slice(1);

var numCount=null;
// console.log(num)
//数据渲染
render();

async function render(){
  
  var str=await Ajax('GET',`http://39.105.192.164:9090/apitest/singlegood?id=${num}`,'');
//   console.log(str);
  var data=JSON.parse(str).data;
	// console.log(data[0].id);
//   data.forEach(function(item){
// 	var oDiv=document.createElement('div');
// 	oDiv.id='goodsDetail';
// 		// oDiv.innerHTML=`
// 		// 	<th>${item.id}</th>
// 		// 	<td>${item.username}</td>
// 		// 	<td>${item.classname}</td>
// 		// 	<td>${item.remark}</td>
// 		// 	<td>
// 		// 	<button class="btn btn-info" onclick="openModel('${item.id}','${item.username}','${item.remark}','${item.password}');">修改</button>
// 		// 	<button class="btn btn-danger" onclick="openDelete(${item.id})">删除</button>
// 		// 	</td>
// 		// `
// 		// tBody.appendChild(tr);
// 		document.body.appendChild(oDiv);
//   })
	var oDiv=document.createElement('div');
	oDiv.id='goodsDetail';
	oDiv.innerHTML=`
		<section>
			<img src=${data[0].pic}>
		</section>
		<section>
			<h2>${data[0].name}</h2>
			<div>
				<p>价格：<span><del>￥${parseInt(data[0].price)*2}</del></span></p>
				<p>促销价：<b>￥${data[0].price}</b></p>
				<p>店铺优惠：<a><span>满69元立减2元</span><i>领取</i></a><a><span>满99元立减3元</span><i>领取</i></a></p>
			</div>
			<div>
				<p>客服：<span><img src="../img/contact.gif"></span></p>
				<p id="add_sub">数量：<b><a href="javascript:;">-</a><input type="text" value="1"><a href="javascript:;">+</a></b></p>
				<p><a href="javascript:;">立即购买</a><a id="move" href="javascript:;"  onclick='addCar({"id":"${data[0].id}","pic":"${data[0].pic}","name":"${data[0].name}","num":1,"price":"${data[0].price}"})'><img></img>加入购物车</a></p>
			</div>
			
			
		
		</section>
	`
	document.body.appendChild(oDiv);


		/*--------------数量加减------------------*/
		var addSub=document.getElementById('add_sub');
		var subBtn=addSub.querySelector('a:first-child');
		numCount=document.querySelector('#add_sub input');
		var addBtn=addSub.querySelector('a:last-child');
		subBtn.onclick=function(){
			if(parseInt(numCount.value)==1){
				numCount.value=1;
			}else{
				numCount.value=parseInt(numCount.value)-1;
			}		
		}
		addBtn.onclick=function(){
				numCount.value=parseInt(numCount.value)+1;	
		}

	}
	function addCar(){
		var arr=JSON.parse(localStorage.getItem('result'))||[];//解析数据

			/*--------------更改数量------------------*/
			var data=arguments[0];
			arguments[0].num=numCount.value;
			// console.log(arguments[0])
			// console.log(arguments[0].id)
			if(arr.length){
				for(var i=0;i<arr.length;i++){
					if(arguments[0].id==arr[i].id){
						arr[i].num=parseInt(arr[i].num)+parseInt(arguments[0].num);
						break;
					}
				}
				if(i==arr.length){
					arr.push(data);
				}
			}else{
				arr.push(data);
			}
			
			localStorage.setItem('result',JSON.stringify(arr));



			/*--------------商品飞入购物车------------------*/
			var move=document.getElementById('move');
			// console.log(move)
			var moveObj=document.querySelector('#move img');
			moveObj.src=`${arguments[0].pic}`;
			moveObj.style.cssText=`
				width:50px;
				height:50px;
				position:absolute;
				top:0;
				left:75px;
				opacity:1
			`;

			var iTop=parseInt(moveObj.style.top);
			var iLeft=parseInt(moveObj.style.left);
			var iOpac=parseInt(moveObj.style.opacity)
			// console.log(iTop,iLeft);

			clearInterval(moveObj.timer);
			moveObj.timer=setInterval(function(){
				iTop-=150;
				iLeft+=100;
				iOpac-=0.4;
				if(iOpac<0){iOpac=0;}
				if(iLeft>300){iLeft=300;}
				if(iTop<-340){iTop=-340}

				moveObj.style.top=iTop+'px';
				moveObj.style.left=iLeft+'px';
				moveObj.style.opacity=iOpac;

				if(iOpac==0&&iLeft==300&&iTop==-340){
					moveObj.style.left='75px';
					moveObj.style.top=0;

					/*--------------判断购物车中是否有内容，有则加红点------------------*/

					var redDot=document.querySelector('#red_dot span');
					if(localStorage.getItem('result')){
						if(JSON.parse(localStorage.getItem('result')).length){
							redDot.className='redDot'
						}
					}
					
				}
			},300)
			
			
	}

	/*--------------判断购物车中是否有内容，有则加红点------------------*/

	var redDot=document.querySelector('#red_dot span');
	if(localStorage.getItem('result')){
		if(JSON.parse(localStorage.getItem('result')).length){
			redDot.className='redDot'
		}
	}
</script>
</body>
</html>